<template>
    <s-theme>
        <s-header backText="个人资料" />
        <div class="absolute row flex-center" style="bottom: 100rpx; width: 100%">
            <div class="flex flex-center logout-btn" @click="conf.logout.show = true">退出登录</div>
            <s-dialog
                v-model:show="conf.logout.show"
                title="提示"
                content="确定要退出登录吗？"
                confirmText="退出"
                @confirm="confirm"
            />
        </div>
        <s-line />
        <div style="padding: 0rpx 20rpx">
            <div class="s-list-item">
                <div>头像</div>
                <div class="row items-center">
                    <image
                        :src="CUser.info.avatarUrl"
                        style="width: 60rpx; height: 60rpx; border-radius: 30rpx"
                    ></image>
                    <div style="margin-left: 10rpx">
                        <s-icon
                            class="flex inline"
                            type="left"
                            color="#999"
                            size="25"
                            style="transform: rotateZ(180deg); transform-origin: center"
                        />
                    </div>
                </div>
            </div>
            <s-line />
            <div class="s-list-item">
                <div>昵称</div>
                <div>{{ CUser.info.nickName }}</div>
            </div>
            <s-line />
        </div>
    </s-theme>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import CIndex from '~/store/CIndex'
import CUser from '~/store/CUser'
import Timer from '~/utils/Timer'

const conf = reactive({
    logout: {
        show: false
    }
})

const confirm = () => {
    conf.logout.show = false
    Timer.once(() => {
        CIndex.toIndex('我的')
        CUser.logout()
    }, 300)
}
</script>
<style lang="less" scoped>
.logout-btn {
    width: 350rpx;
    height: 80rpx;
    background-color: #e84646;
    border-radius: 40rpx;
    color: #fff;
    font-size: 30rpx;
}
</style>
